import leftIcon from '@/assets/layout/left.png';
import { PageContainer } from '@ant-design/pro-components';
import { history, Outlet, useLocation, useRouteProps } from '@umijs/max';
import { RouteObject } from '../../config/routes';
import './transition.less';

const Index = () => {
  const { name, meta, hideBreadcrumb = false }: RouteObject = useRouteProps();
  const { pathname } = useLocation();
  // console.log(useRouteProps(), 'routeProps-当前路由对象');

  return (
    <>
      <PageContainer
        header={{
          title: (
            <>
              {!hideBreadcrumb && (
                <div className="flex items-center justify-start ">
                  {meta?.showBack && (
                    <img
                      src={leftIcon}
                      className="cursor-pointer w-[30px] h-[30px] mt-[1px]"
                      onClick={() => history.back()}
                    />
                  )}
                  <div className="font-[600] text-[20px] ml-[1px]">
                    {meta?.title ? meta?.title : name}
                  </div>
                </div>
              )}
            </>
          ),
          breadcrumb: {},
        }}
        fixedHeader
      >
        {/* <SwitchTransition>
          <CSSTransition
            key={pathname}
            // nodeRef={useRouteProps()}
            timeout={300}
            classNames="fade"
          > */}
        <Outlet />
        {/* </CSSTransition>
        </SwitchTransition> */}
      </PageContainer>
    </>
  );
};
export default Index;
